<template>
    <div>
        <el-row>
            <el-button type="primary" icon="el-icon-plus" @click="addMachineShow" style="margin-bottom: 10px;"
                size="medium">新增设备类型/型号</el-button>
            <el-tabs v-model="activeTab" type="border-card">
                <el-tab-pane v-for="(category, index) in machineCategoryOptions" :key="index" :label="category.label"
                    :name="category.value">
                    <el-table :data="currentMachineData(category.value)" :key="activeTab" border
                        :header-cell-style="headerStyleEvent">
                        <el-table-column prop="vendor" label="厂商" align="center"></el-table-column>
                        <el-table-column prop="machineType" label="类型/型号" align="center"></el-table-column>
                        <el-table-column prop="machineTypeDesc" label="描述" align="center"></el-table-column>
                        <el-table-column label="操作" align="center">
                            <template slot-scope="scope">
                                <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </el-row>
        <!-- 新增编辑 -->
        <el-dialog :title="isEdit ? '更新设备类型/型号' : '新增设备类型/型号'" :visible.sync="dialogVisible" width="46%">
            <el-form ref="form" :model="formmodel" label-width="115px" :rules="rules">
                <el-form-item label="机器类别" prop="equipCategory">
                    <el-select v-model="formmodel.equipCategory" clearable style="width: 100%;">
                        <el-option v-for="item in machineCategoryOptions" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="机器类型/型号" prop="machineType">
                    <el-input v-model="formmodel.machineType"></el-input>
                </el-form-item>
                <el-form-item label="厂商" prop="vendor">
                    <el-input v-model="formmodel.vendor"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="machineTypeDesc">
                    <el-input v-model="formmodel.machineTypeDesc"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="isEdit ? handleUpdateMachine() : handleAddMachine()">确
                    定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
import { FetchGetMachineTypes, FetchAddMachineData, FetchUpdateMachineData } from '@/network/machineTypeManage'

export default {
    data() {
        return {
            machineTypes: [], // 用于保存获取的数据
            activeTab: '印刷机', // 当前激活的标签页 [暂默认]

            isEdit: false,
            dialogVisible: false,
            rules: {
                equipCategory: [{ required: true, message: '请选择机器类别', trigger: 'change' }],
                machineType: [{ required: true, message: '请输入机器型号', trigger: 'blur' }],
                vendor: [{ required: true, message: '请输入机器厂商', trigger: 'blur' }],
                machineTypeDesc: [{ message: '请输入描述', trigger: 'blur' }],
            },
            machineCategoryOptions: [{
                value: '贴片机',
                label: '贴片机'
            }, {
                value: '印刷机',
                label: '印刷机'
            },],
            formmodel: {
                vendor: '',
                equipCategory: '',
                machineType: '',
                machineTypeDesc: ''
            }
        }
    },
    mounted() {
        this.getMachineTypeData()
    },
    computed: {
    },
    methods: {
        // 获取机器数据
        async getMachineTypeData() {
            try {
                const res = await FetchGetMachineTypes()
                // console.log(res);

                this.machineTypes = res.data // 假设接口返回的数据在 res.data 中


            } catch (error) {
                console.log(error)
            }
        },
        headerStyleEvent() {
            if (this.$store.state.theme.useCustomTheme === "7-gpx") {
                return { background: '#f5f5f5', color: '#2F4F4F' };
            } else {
                return { background: '#eef1f6', color: '#606266' }
            }
        },
        // // 处理标签页点击事件
        // handleTabClick(tab) {
        //     console.log(tab)
        //     console.log(this.activeTab)
        //     // const selectedCategory = this.machineTypes.find(
        //     //     (category) => category.equipCategory === tab.name
        //     // )
        //     // if (selectedCategory) {
        //     //     this.currentMachineData = selectedCategory.machineData
        //     // }
        // },
        currentMachineData(tab) {  // 当前选中的机器数据
            const selectedCategory = this.machineTypes.find(
                (category) => category.equipCategory === tab //this.activeTab
            )
            if (selectedCategory) {
                return selectedCategory.machineData
            }
            return [];
        },
        addMachineShow() {
            this.dialogVisible = true
            this.isEdit = false
            this.formmodel = {
                vendor: '',
                equipCategory: '',
                machineType: '',
                machineTypeDesc: ''
            }
        },
        //新增
        async handleAddMachine() {

            const valid = await this.$refs['form'].validate().catch(err => false);
            if (valid) {
                // 表单验证通过，执行新增线体请求
                const res = await FetchAddMachineData(this.formmodel); // 确保使用的是 addForm 而不是 this.form
                if (res.status === 200) {
                    // 新增成功后的提示
                    this.$message({
                        message: '新增成功',
                        type: 'success'
                    });
                    // 关闭对话框并重置表单
                    this.dialogVisible = false;
                    this.getMachineTypeData()
                    this.$refs['form'].resetFields(); // 重置表单
                }
            }
            else {
                console.log('表单验证失败:');
            }
        },
        // 编辑操作
        handleEdit(row) {
            this.formmodel = row
            this.dialogVisible = true
            this.isEdit = true
            console.log('编辑', row)
        },
        async handleUpdateMachine() {

            const valid = await this.$refs['form'].validate().catch(err => false);
            if (valid) {
                // 表单验证通过，执行新增线体请求
                const res = await FetchUpdateMachineData(this.formmodel); // 确保使用的是 addForm 而不是 this.form
                if (res.status === 200) {
                    // 新增成功后的提示
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    });
                    // 关闭对话框并重置表单
                    this.dialogVisible = false;
                    this.getMachineTypeData()
                    this.$refs['form'].resetFields(); // 重置表单
                }
            }
            else {
                console.log('表单验证失败:');
            }
        }
    }
}
</script>

<style scoped></style>